import React, { use, useState } from "react";
import ResMethod from "../utils/ResMethod";
import { setToken, setUserLoginTime, setUserName, setUserRole, setUserFrom } from "../utils/auth";
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { message, Input } from 'antd';
import MetaBalls from "../blocks/Animations/MetaBalls/MetaBalls";
import { useAppContent } from "../AppContent";



const Login: React.FC = () => {
  const [user, setUser] = useState("");
  const [password, setPassword] = useState("");

  const [messageApi, contextHolder] = message.useMessage();

  const [isLogin, setIsLogin] = useState(true);

  const { state, setState } = useAppContent();

  const Suinfo = () => {
    
    messageApi.success('登录成功');
  };

  const Errorinfo = (content: string) => {
    
    messageApi.error(content)
  };


  const handleLogin = async () => {
    setIsLogin(false);
    if (!user || !password) {
      Errorinfo('请输入账号密码');
      setIsLogin(true)

      return;
    }

    const res = await ResMethod("/login", "POST", {
      user,
      password,
    });

    if (res) {
      setToken(res.access_token);
      setUserName(res.name)
      setUserLoginTime(res.login_time)
      setUserRole(res.role)
      setUserFrom(res.from)
      Suinfo();

    console.log(state)
      setTimeout(()=> {
        window.location.href = "/";
      }, 300) 
      
      
    } else {
      setIsLogin(true)
      Errorinfo('登录失败 请检查账号密码')
    }
  };
  return (
    <div className="min-h-screen min-w-full bg-gray-100 flex items-center justify-center p-4">
      
            {contextHolder}

      <div className="p-10 w-200 h-100 bg-white rounded-lg shadow-lg p-8 flex items-center">
      <div className="flex-5 mr-5 w-[50%] h-full items-center">
      <MetaBalls
  color="#123123"
  cursorBallColor="#ffffff"
  cursorBallSize={2}
  ballCount={15}
  animationSize={30}
  enableMouseInteraction={true}
  enableTransparency={true}
  hoverSmoothness={0.05}
  clumpFactor={1}
  speed={0.3}
/>
      </div>


        {/* 用户名输入 */}
        <div className="flex-3 ml-5">
        <div className="mb-6">
          <label
            className="block text-gray-700 text-sm font-semibold mb-2"
            htmlFor="username"
          >
            账号
          </label>
          <Input
            id="username"
            type="text"
            value={user}
            onChange={(e) => setUser(e.target.value)}
            className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600"
            placeholder="请输入账号"
            prefix={<UserOutlined />}
          />
        </div>

        {/* 密码输入 */}
        <div className="mb-8">
          <label
            className="block text-gray-700 text-sm font-semibold mb-2"
            htmlFor="password"
          >
            密码
          </label>
          <Input
            id="password"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600"
            placeholder="请输入密码"
            prefix={<LockOutlined />}
          />
        </div>

        {/* 登录按钮 */}
        <button
          onClick={isLogin ? handleLogin : () => setTimeout(() => messageApi.error('验证中'), 300) }
          className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300"
        >
          登录
        </button>
      </div>
      </div>
    </div>
  );
};

export default Login;
